<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
      <table style="border-collapse: collapse;width:100%" class="table-container">
        <tr>
          <td>订单基本信息</td>
          <td>订单支付信息</td>
          <td>订单发票信息</td>
          <td colspan="4">订单收货人信息</td>
        </tr>
        <tr>
          <td>
            <p>平台订单号：{{basic.basic.no}}</p>
            <p>订单状态：{{basic.basic.status_ch}}</p>
            <p>下单时间：{{basic.basic.created_at}}</p>
            <p>付款时间：{{basic.basic.payed_at}}</p>
          </td>
          <td>
            <p>支付方式：{{basic.payment.pay_type}}</p>
            <p>商品金额：{{basic.payment.total_fee}}</p>
            <p>运费：{{basic.payment.post_fee}}</p>
            <p>税费：{{basic.payment.tax_fee}}</p>
            <p>促销优惠：{{basic.payment.promotion}}</p>
            <p v-if="basic.payment.vip != '￥0.00'" data-aa="basic.payment.vip">会员折扣：{{basic.payment.vip}}</p>
            <p>优惠券：{{basic.payment.coupon}}</p>
            <p>红包：{{basic.payment.hb}}</p>
            <p>应付金额：{{basic.payment.total_fee}}</p>
            <p>已付金额：{{basic.payment.already_payment}}</p>

          </td>
          <td>
            <p>是否需要发票：{{basic.invoice.is_need_invoice?'是':'否'}}</p>
            <div v-if="basic.invoice.is_need_invoice">
              <p v-if="basic.invoice.message" class="notice">{{basic.invoice.message}}</p>
              <p>发票类型:{{invoiceTypes[basic.invoice.type]}}</p>
              <p>发票抬头:{{basic.invoice.title}}</p>
              <p>发票内容:{{basic.invoice.content}}</p>
              <p>发票金额:{{basic.invoice.amount}}</p>
              <p v-if="/3/.test(basic.invoice.type)&&basic.invoice.email">电子邮箱:{{basic.invoice.email}}</p>
              <p v-if="basic.invoice.taxpayer_idNumber">纳税人识别码:<br/>{{basic.invoice.taxpayer_idNumber}}</p>
              <p v-if="basic.invoice.reg_addr">注册地址:{{basic.invoice.reg_addr}}</p>
              <p v-if="basic.invoice.reg_tel">注册电话:{{basic.invoice.reg_tel}}</p>
              <p v-if="basic.invoice.open_bank">开户银行:{{basic.invoice.open_bank}}</p>
              <p v-if="basic.invoice.bank_account">开户账户:{{basic.invoice.bank_account}}</p>


              <div v-if="/2/.test(basic.invoice.type)">
                <p v-if="basic.invoice.bank_account">收票人姓名:{{basic.invoice.receiver_name}}</p>
                <p v-if="basic.invoice.bank_account">收票人手机:{{basic.invoice.receiver_tel}}</p>
                <p v-if="basic.invoice.bank_account">收票人地址:{{basic.invoice.receiver_address}}</p>
              </div>
            </div>
          </td>
          <td colspan="4">
            <p>收货人：{{basic.receiver.name}}</p>
            <p>收货人手机：{{basic.receiver.mobile}}</p>
            <p>收货人地址：{{basic.receiver.address}}</p>
            <p>收货人详细地址：{{basic.receiver.region}}</p>
          </td>
        </tr>
        <tr>
          <td>店铺名称</td>
          <td>店铺订单号</td>
          <td>物流公司</td>
          <td>物流单号</td>
          <td>发货时间</td>
          <td>商品名称</td>
          <td>发货数量</td>
        </tr>
        <tr v-for="j in basic.delivery">
          <td>{{j.name}}</td>
          <td>{{j.shop_order_no}}</td>
          <td>{{j.corp_name}}</td>
          <td> <span @click="getDeliveryTrace(j)" class="link-style"> {{j.express_no}} </span></td>
          <td>{{j.created_at}}</td>
          <td colspan="2" style="padding: 0">
            <table style="width: 100%" class="in-table">
              <tr v-for="k in j.item_list">
                <td width="50%">{{k.name}}</td>
                <td width="50%">{{k.num}}</td>
              </tr>
            </table>
        </td>
        </tr>
      </table>
    </el-tab-pane>
    <el-tab-pane label="商品信息" name="second">
      <div class="div-container">
        <table style="border-collapse: collapse;" class="table-container">
          <tr>
            <td>店铺名称</td>
            <td>店铺单号</td>
            <td>店铺订单状态</td>
            <td>商品级订单号</td>
            <td>货号</td>
            <td>商品名称</td>
            <td>规格</td>
            <td>标准售价</td>
            <td>活动价</td>
            <td>数量</td>
            <td>平台优惠券分摊</td>
            <td>店铺优惠券分摊</td>
            <td>红包分摊</td>
            <td>促销分摊</td>
            <td>运费分摊</td>
            <td>税费</td>
            <td>成交单价</td>
            <td>活动备注</td>
            <td>活动卡金额</td>
            <td>充值卡金额</td>
            <td>宠币</td>
            <td>网关金额</td>
          </tr>
          <tr v-for="i in items">
            <td>{{i.shop_name}}</td>
            <td>{{i.shop_order_no}}</td>
            <td>{{i.shop_order_status}}</td>
            <td>{{i.goods_order_no}}</td>
            <td>{{i.art_no}}</td>
            <td><a :href="itemLink(i.item_id,other.channel)" target="_blank">{{i.title}}</a></td>
            <td>{{i.spec_nature_info}}</td>
            <td>{{i.sell_price}}</td>
            <td>{{i.promotion_price}}</td>
            <td>{{i.num}}</td>
            <td>{{i.discount_coupon_platform}}</td>
            <td>{{i.discount_coupon_shop}}</td>

            <td>{{i.discount_coupon_red_packet}}</td>
            <td>{{i.discount_promotion}}</td>
            <td>{{i.discount_post}}</td>
            <td>{{i.taxes}}</td>
            <td>{{i.transaction_price}}</td>
            <td>{{i.activity_mark}}</td>
            <td>{{i.activity_Ecard}}</td>
            <td>{{i.recharge_Ecard}}</td>
            <td>{{i.ucard}}</td>
            <td>{{i.gate_way_price}}</td>
          </tr>
        </table>
      </div>

    </el-tab-pane>
    <el-tab-pane label="其他信息" name="third">
      <div>
        <p>IP地址：{{other.ip}}</p>
        <p>订单来源：{{other.platform_from}}</p>
      </div>
    </el-tab-pane>


    <el-dialog
      title="查看物流"
      :visible.sync="dialogVisible"
      width="50%"
      center>
      <div class="delivery-head">
        <p>物流公司：{{delivery.corp_name}}</p>
        <p>物流单号：{{delivery.express_no}}</p>
      </div>
      <div v-if="deliveryTraceArr.length">
        <ul v-for='(trace_list,index) in deliveryTraceArr'>
          <li v-if="index === 0" style="color:blue">
            <span style="margin-right:50px">最近物流更新：{{trace_list.time}}</span>
            <p>
              {{trace_list.context}}
            </p>
          </li>

          <li v-else><span style="margin-right:50px">{{trace_list.time}}</span>{{trace_list.context}}</li>
        </ul>
      </div>
      <div v-else>
        <p class="no-data">暂无物流信息，请稍后再试...</p>
      </div>
    </el-dialog>
  </el-tabs>
</template>

<script>
  import itemLink from '@/mixins/itemLink'
  import { getDeliveryTrace } from '@/api/trade/consignment'

  let _self;
  export default {
    props: {
      detailInfo: {
        type: Object,
        default: ''
      }
    },
    mixins:[itemLink],
    data() {
      return {
        invoiceTypes: {
          1: '普通',
          2: '增值',
          3: '电子'
        },
        basic: this.detailInfo.basic,
        items: this.detailInfo.items,
        other: this.detailInfo.other,
        activeName: 'first',
        dialogVisible:false,
        delivery:"",
        deliveryTraceArr:""
      }
    },
    methods:{
      handleClick(tab, event) {
        //console.log(tab, event);
      },
      handleExpress(delivery){
        this.getDeliveryTrace(delivery);
        this.dialogVisible = true;
      },
      getDeliveryTrace(delivery){
        console.log(delivery);
        var that = this;
        that.delivery = delivery;
        let params = {
          code:delivery.corp_code,
          phone:that.basic.receiver.mobile,
          express_no:delivery.express_no,
        };
        new Promise(function (resolve, reject) {
          getDeliveryTrace(params).then((res) => {
            if(res.code == 0){
              that.deliveryTraceArr = res.data;
              resolve(res.data);
            }else{
              reject();
            }
          })
        }).then(() => {
          that.dialogVisible = true;
        }).catch(()=>{
          that.$message.error('查询失败');
        })
      }
    },
    created(){

    }
  }
</script>

<style lang='scss' scoped>
  .div-container {
    width: 100%;
    overflow: auto;
  }

  .table-container {
    border: 1px solid #eee;
    td {
      height: 30px;
      line-height: 30px;
      min-width: 120px;
      padding: 0 5px;
      text-align: center;
      //min-width: 30%
    }
    p {
      height: 15px;
      line-height: 15px;
      text-align: left;
    }
    .notice{
      color:#e60a30;
    }
  }
  .link-style{
    color:#409EFF;
    text-decoration: underline
  }
  .in-table td{
    border-bottom: none;
  }
  .in-table td:nth-child(2){
    border-right: none;
  }
</style>
